<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!-- Bootstrap -->
    <link href="<?=base_url();?>/public/resource/default/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<?=base_url();?>/public/resource/default/css/style.css" rel="stylesheet" >

    <style>
        body {
            padding-bottom: 15px;
        }
        .grid { margin:0 auto; }

        .grid-sizer,
        .grid-item { width: 15%; }

        .gutter-sizer { width: 2%; }

        /* 2 columns wide */
        .grid-item--width2 { width: 30%; }
    </style>

</head>
<body>

<div class="container-fluid wp-content">

    <div class="wp-content-mbx">
        <a><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a>
        <div>
            <span class="mainhead">媒体库</span>
            <span class="subhead">媒体库内容综合管理</span>
        </div>
    </div>

    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active" ><a href="<?=site_url(array('media','index'))?>">媒体库</a></li>
            <li role="presentation" ><a href="<?=site_url(array('media','upload'))?>">上传</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active">

                <div class="wp-panel panel-default">

                    <div class="wp-panel-tool">
                        <div class="pull-right">
                            <input type="text" class="dd-form-control" />
                            <button class="btn btn-sm btn-default active">搜索</button>
                        </div>

                        <div>
                            <select class="dd-form-control" name="action">
                                <option value="">2015年十月</option>
                                <option value="">2015年九月</option>
                            </select>
                            <select class="dd-form-control" name="action">
                                <option value="">分类1</option>
                                <option value="">分类2</option>
                            </select>
                            <button class="btn btn-sm btn-default active" onclick="fun_do_action();">筛选</button>
                        </div>
                        <i class="clearfix"></i>
                    </div>

                    <div class="wp-panel-body">
                        <div class="grid">
                            <?php if ( count($media_arr) ) : ?>
                            <?php foreach ( $media_arr as $media ) : ?>

                                    <div class="grid-sizer"></div>
                                    <div class="gutter-sizer"></div>
                                    <div class="grid-item">
                                        <a href="javascript:fun_set_media_info('<?=$media->media_authcode?>',<?=$media->media_width?>,<?=$media->media_height?>);" class="thumbnail">
                                            <img src="<?=site_url(array('media','out','?params=' .$media->media_authcode))?>" alt="Generic placeholder thumbnail">
                                            <p class="win-media-info"><?=$media->media_name?></p>
                                            <p class="win-media-info"><?=$media->media_size_count?></p>
                                            <p class="win-media-info"><?=date('Y-m-d H:i:s',$media->media_create_time)?></p>
                                        </a>
                                    </div>
                                    <div class="grid-item grid-item--width2"></div>

                            <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <nav>
                    <?php echo $page ?>
                </nav>
            </div>

        </div>
    </div>
</div>

<!-- 确认工具条 -->
<div id="img-window-bottom-tools" role="alert">
    <div class="pull-right">
        <button class="btn btn-xs btn-default" onclick="fun_cancel();">取消</button>
        <button class="btn btn-xs btn-primary" onclick="fun_confirm_select();">确认选择</button>
    </div>

    <div class="media-info">
        宽度：<input type="text" id="mediaWidth" />
        高度：<input type="text" id="mediaHeight" />
        <input type="hidden" id="mediaTrueWidth" />
        <input type="hidden" id="mediaTrueHeight" />
        <input type="hidden" id="mediaAuthcode" />
    </div>

    <i class="clearfix"></i>
</div>



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?=base_url();?>/public/resource/default/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Include Masonry -->
<script src="<?=base_url();?>/public/resource/default/vendor/masonry/masonry.pkgd.min.js"></script>
<script src="<?=base_url();?>/public/resource/default/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>

<script src="<?=base_url();?>/public/resource/default/js/init.js"></script>

<script>

    $(function(){
        $('.thumbnail').tooltip();

        var $grid = $('.grid').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.grid-item',
            percentPosition: true
        });

        $grid.imagesLoaded().progress( function() {
            $grid.masonry('layout');
        });
    })


    /**
     * 设置图片宽高
     *
     * @param width
     * @param height
     */
    function fun_set_media_info(authcode,width,height) {
        $('#mediaAuthcode').val(authcode);
        $('#mediaWidth').val(width);
        $('#mediaHeight').val(height);
        $('#mediaTrueWidth').val(width);
        $('#mediaTrueHeight').val(height);
    }

    /**
     * 确认选择操作
     */
    function fun_confirm_select() {
        // 调用父级窗口中得方法，设置值
        var authcode = $('#mediaAuthcode').val();
        var width = $('#mediaWidth').val();
        var height = $('#mediaHeight').val();
        var trueWidth = $('#mediaTrueWidth').val();
        var trueHeight = $('#mediaTrueHeight').val();

        if ( !authcode )
        {
            alert('请先选择一张图片');
            return;
        }

        params = '?params=' + encodeURIComponent(authcode);

        if ( width != trueWidth || height != trueHeight )
        {
            if ( width && parseInt(width) != 0 )
            {
                params += ',w_' + parseInt(width);
            }

            if ( height && parseInt(height) != 0 )
            {
                params += ',h_' + parseInt(height);
            }
        }

        params = '<?=site_url(array('media','out'))?>' + params ;

        // execute parent method
        opener.fun_img_win_callback(params);

        fun_cancel();
    }

    /**
     * 取消并关闭窗口
     */
    function fun_cancel() {
        window.top.opener = null;
        window.close();
    }

</script>

</body>
</html>